<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-pie-chart"></i> schart图表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
<!--   v-model的值为  当前被选中的el-option的 value 属性值

         v-model:双向绑定

         -->
                <el-select v-model="queryData.agent" placeholder="请选择">
<!--              label:选中之后展示的文字      value:选中之后该选择框的值 -->
                    <el-option key="1" label="全部" value=""> </el-option>
                    <el-option key="2" label="移动端" value="mobile"> </el-option>
                    <el-option key="3" label="pc端" value="pc"> </el-option>
                    <el-option key="4" label="其他" value="other"> </el-option>
                </el-select>


                <el-date-picker
                    v-model="queryData.start"
                    type="date"
                    value-format="timestamp"
                    placeholder="选择开始日期">
                </el-date-picker>

                <el-date-picker
                    v-model="queryData.end"
                    type="date"
                    value-format="timestamp"
                    placeholder="选择结束日期">
                </el-date-picker>

                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>


            <div class="schart-box">
                <div class="content-title">饼状图</div>
<!--    canvasId决定了它的形状
            饼状图：pie
            环形图：ring
            折线图：line
            柱状图：bar
            -->
                <schart class="schart" canvasId="pie" :options="options3"></schart>
            </div>

        </div>
    </div>
</template>

<script>
import Schart from 'vue-schart';
export default {
    name: 'basecharts',
    components: {
        Schart
    },
    data() {
        //设置初始时间
        let d =new Date();
        d.setFullYear(2022);
        d.setMonth(0)
        d.setDate(1)
        return {
            //查询参数
            queryData:{
                agent:'',//终端类型
                start:d.getTime(),
                end:new Date().getTime()
            },
            options3: {
                //类型  饼状图
                type: 'pie',
                title: {
                    text: '微博热点话题分布图'
                },
                legend: {
                    position: 'left'
                },
                bgColor: '#fbfbfb',
                //饼状每个扇形的分类或名称，用于图例文本
                labels: [''],
                //数据集
                datasets: [
                    {
                        data: [0]
                    }
                ]
            }

        };
    },
    ///钩子函数 一进来就加载数据
    created() {
        this.loadData();
    },
    methods:{
        //加载数据
        loadData(){
            this.$axios.post('/home/count',this.queryData).then(res=>{
                console.log(res);
                //准备两个数组 来装title 和count
                let arrLabels=[];
                let arrCount=[];
                for (let data of res.data){
                    arrLabels.push(data.title);
                    arrCount.push(data.count);
                }
                //赋值
                this.options3.labels=arrLabels;
                this.options3.datasets[0].data=arrCount;
            })
        },
        //当你选择选项之后，查询参数发生变化，再次发送请求
        handleSearch(){
                this.loadData()
        }
    }

};
</script>

<style scoped>
.schart-box {
    display: inline-block;
    margin: 20px;
}
.schart {
    width: 600px;
    height: 400px;
}
.content-title {
    clear: both;
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
</style>